iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

重新開始的Vue.js 30day系列 第 20

從頭開始的Javascript 入門 -Flex Panels Image Gallery Day18

  • 分享至 

  • xImage
  •  

Flex Panels Image Gallery

demo

重點

  1. 將.panels 設置為display:flex
  2. 設定每個子panel 的flex 值為1
  3. 針對每個子panel,設為display:flex,設置其flex 主軸方向
  4. 控制.panle 的子元素< p> 中的文字垂直、水平居中(單獨看每個panel,
  5. 其中的文字也可以用flex 的思路來使其三等分後居中) 設置為display:flex
  6. 設置flex 值設置其子元素的佈局方式:垂直水平居中(沿主軸、側軸居中) 設定點擊圖片後文字移動的樣式設定點擊圖片展開後的圖片的flex 值

includes()

Safari transitionend event.propertyName === flex */

Chrome + FF transitionend event.propertyName === flex-grow */
由於各個瀏覽器有不同對應 事件 所以我們使用includes()來找到flex

flex屬性
css選擇器
A Complete Guide to Flexbox
物件屬性
e.propertName
includes 傳回布林值,指出字串物件中是否包含傳入的字串


上一篇
從頭開始的Javascript 入門 -Speech Detection Day17
下一篇
從頭開始的Javascript 入門 - 實作 js & css clock Day19
系列文
重新開始的Vue.js 30day21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言